<template>
  <el-dialog
    :visible.sync="isVisible"
    title="IR参数设置"
    width="630px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="onClose"
  >
    <div class="dialog-container">
      <el-form
        ref="irSettingForm"
        :model="irSettings"
        :rules="irSettingRules"
        label-width="120px"
      >
        <el-form-item label="发射率:" prop="emissivity" v-if="false">
          <el-input
            v-model.number="irSettings.emissivity"
            placeholder="请输入发射率"
          />
        </el-form-item>
        <el-form-item
          label="反射温度 (°C):"
          prop="reflectedTemperature"
          v-if="false"
        >
          <el-input
            v-model.number="irSettings.reflectedTemperature"
            placeholder="请输入反射温度"
          />
        </el-form-item>
        <el-form-item label="环境温度 (°C):" prop="ambientTemperature">
          <el-input
            v-model.number="irSettings.ambientTemperature"
            placeholder="请输入环境温度"
          />
        </el-form-item>
        <el-form-item label="相对湿度 (%):" prop="relativeHumidity">
          <el-input
            v-model.number="irSettings.relativeHumidity"
            placeholder="请输入相对湿度"
          />
        </el-form-item>
        <el-form-item
          label="测温距离 (m):"
          prop="measurementDistance"
          v-if="false"
        >
          <el-input
            v-model.number="irSettings.measurementDistance"
            placeholder="请输入测温距离"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSave">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { updateCameraIR } from '@/api/camera';
export default {
  name: 'IrSettingDialog',
  data() {
    return {
      isVisible: false,
      irSettings: {
        emissivity: '-',
        reflectedTemperature: '-',
        ambientTemperature: 25,
        relativeHumidity: 50,
        measurementDistance: '-',
      },
      irSettingRules: {
        emissivity: [
          {
            required: true,
            message: '请输入发射率',
            trigger: ['blur', 'change'],
          },
        ],
        reflectedTemperature: [
          {
            required: true,
            message: '请输入反射温度',
            trigger: ['blur', 'change'],
          },
        ],
        ambientTemperature: [
          {
            required: true,
            message: '请输入环境温度',
            trigger: ['blur', 'change'],
          },
        ],
        relativeHumidity: [
          {
            required: true,
            message: '请输入相对湿度',
            trigger: ['blur', 'change'],
          },
        ],
        measurementDistance: [
          {
            required: true,
            message: '请输入测温距离',
            trigger: ['blur', 'change'],
          },
        ],
      },
    };
  },
  computed: {
    // 当前播放的视频对象
    currentVideo() {
      return this.$store.getters['playVideo/getCurrentPlayingVideo'];
    },
    // config配置
    config() {
      return this.$store.getters['websocketClient/config'];
    },
  },
  methods: {
    /**
     * 显示设置对话框
     */
    show() {
      this.isVisible = true;
      this.irSettings = {
        emissivity: this.currentVideo.refRate || '-',
        reflectedTemperature: this.currentVideo.refTemperature || '-',
        ambientTemperature: this.currentVideo.envTemperature,
        relativeHumidity: this.currentVideo.relHumidity,
        measurementDistance: this.currentVideo.temDistance || '-',
      };
    },
    /**
     * 隐藏
     */
    onClose() {
      this.isVisible = false;
      // 清除表单校验
      this.$refs.irSettingForm.resetFields();
    },
    /**
     * 取消
     */
    onCancel() {
      this.isVisible = false;
      // 清除表单校验
      this.$refs.irSettingForm.resetFields();
    },
    /**
     * 保存
     */
    onSave() {
      this.$refs.irSettingForm.validate(async (valid) => {
        if (!valid) {
          return false;
        } else {
          const param = {
            id: this.currentVideo.id,
            reflection_rate: this.irSettings.emissivity,
            reflection_temperature: this.irSettings.reflectedTemperature,
            environment_temperature: this.irSettings.ambientTemperature,
            relative_humidity: this.irSettings.relativeHumidity,
            temperature_distance: this.irSettings.measurementDistance,
          };
          const res = await updateCameraIR(param);
          if (res.code === 200) {
            this.$message.success('修改成功');
            this.$emit('on-refresh', this.currentVideo.id);
            this.isVisible = false;
            // 添加成功并发送指令
            this.$store.dispatch('websocketClient/sendMessage', {
              ws_url: `${process.env.VUE_APP_WEBSOCKET_URL}/${this.currentVideo.cameraId}`,
              message: {
                cameraId: this.currentVideo.cameraId,
                command: this.config['btnCommand']['iRParams'],
                data: param,
              },
            });
          } else {
            this.$message.error('修改失败');
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 20px;
}
</style>
